import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
  Modal,
  message,
  Col,
  Select,
  Button,
  Input,
  DatePicker,
  Popover,
  Radio,
  InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getParamUrl, baseUri, myMessage } from '../../utils/formatDataSource';
import StudentClassTimeAddFrom from './StudentClassTimeAddFrom';
@connect(({ studentMg3, classInfo3, loading }) => ({
  studentMg:studentMg3,
  classInfo:classInfo3,
  loading: loading.models.tag,
}))
@Form.create()
class StudentMg extends PureComponent {
  state = {
    checkVisible: false,
    selectedRowKeys: [],
    selectedRows: [],
    downLoadDateFrom: '',
    downLoadDateTo: '',
    wordName: '',
    type: null,
    pageNo: 1,
    subjectList: [],
    campusList: [],
    lessonChecks: [],
    currentLesson: {},
    defaultDateRange: [],
    queryDateFrom: '',
    queryDateTo: '',
    studentList: [],
    currentRecord: {},
    studentClassTime: {
      time1: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time2: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time3: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time4: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time5: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time6: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
      time7: {
        mathLeftClassTime: 0,
        chineseLeftClassTime: 0,
        englishLeftClassTime: 0,
        politicsLeftClassTime: 0,
        historyLeftClassTime: 0,
        geoLeftClassTime: 0,
        physicsLeftClassTime: 0,
        chemistryLeftClassTime: 0,
        biologyLeftClassTime: 0,
      },
    },
    downLoadVisible: false,
  };
  componentDidMount() {
    this.initLoad();
  }
  initLoad = () => {
    const { dispatch } = this.props;
    var params = { pageNo: 1 };
    this.loadData(params);
    dispatch({
      type: 'classInfo3/getSubjectList',
    }).then(() => {
      this.setState({
        subjectList: this.props.classInfo.subjectList,
      });
    });
  };
  searchByParam = () => {
    const { manageStatus, subject } = this.state;
    const { form } = this.props;
    const params = {};
    params.learnState = manageStatus;
    params.subject = subject;
    params.name = form.getFieldValue('name');
    this.loadData(params);
  };
  pageSearch = params => {
    const { manageStatus, subject } = this.state;
    const { form } = this.props;
    params.name = form.getFieldValue('name');
    params.learnState = manageStatus;
    params.subject = subject;
    this.loadData(params);
  };
  loadData = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'studentMg3/getManageStudentList',
      payload: params,
    }).then(() => {
      this.setState({lessonChecks: this.props.studentMg.studentList});
    });
  };

  subjectSelect = e => {
    this.setState({
      subject: e,
    });
  };
  manageStatusSelect = e => {
    this.setState({
      manageStatus: e,
    });
  };
  getStudentClassTimeDetail = (visible, record) => {
    if (visible) {
      const { dispatch } = this.props;
      dispatch({
        type: 'studentMg3/getStudentClassTimeDetail',
        payload: 'studentId=' + record.id,
      }).then(() => {
        this.setState({
          studentClassTime: this.props.studentMg.studentClassTime,
        });
      });
    }
  };
  getColumns = () => {
    const { studentClassTime } = this.state;
    return [
      {
        title: '学生姓名',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '年级',
        dataIndex: 'classLevel',
        key: 'classLevel',
        align: 'center',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        align: 'center',
        render: value => {
          if (value == 1) {
            return '男';
          }
          if (value == 2) {
            return '女';
          }
        },
      },
      {
        title: '报班总数',
        dataIndex: 'classCount',
        key: 'classCount',
        align: 'center',
      },
      {
        title: '学习课程',
        dataIndex: 'subjectCount',
        key: 'subjectCount',
        align: 'center',
      },
      {
        title: '剩余课时',
        dataIndex: 'totalTime',
        key: 'totalTime',
        align: 'center',
        render: (item, record) => {
          return (
            <Popover
              overlayStyle={{ minWidth: '400px', maxWidth: '800px' }}
              placement="bottom"
              trigger="hover"
              onVisibleChange={visible => {
                this.getStudentClassTimeDetail(visible, record);
              }}
              content={
                <table style={{ minWidth: '550px' }}>
                  <tr>
                    <th style={{ textAlign: 'center' }} />
                    <th style={{ textAlign: 'center' }}>数学</th>
                    <th style={{ textAlign: 'center' }}>语文</th>
                    <th style={{ textAlign: 'center' }}>英语</th>
                    <th style={{ textAlign: 'center' }}>政治</th>
                    <th style={{ textAlign: 'center' }}>历史</th>
                    <th style={{ textAlign: 'center' }}>地理</th>
                    <th style={{ textAlign: 'center' }}>物理</th>
                    <th style={{ textAlign: 'center' }}>化学</th>
                    <th style={{ textAlign: 'center' }}>生物</th>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>普通班课</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time1.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>1V2班课</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time2.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>1V3班课</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time3.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>A类1对1</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time4.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>B类1对1</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time5.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>C类1对1</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time6.biologyLeftClassTime}
                    </td>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>D类1对1</th>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.mathLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.chineseLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.englishLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.politicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.historyLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.geoLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.physicsLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.chemistryLeftClassTime}
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      {studentClassTime.time7.biologyLeftClassTime}
                    </td>
                  </tr>
                </table>
              }
            >
              {item - record.classTime}
            </Popover>
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'manageStatusName',
        key: 'manageStatusName',
        align: 'center',
      },
      {
        title: '学习状态',
        dataIndex: 'learnStatusName',
        key: 'learnStatusName',
        align: 'center',
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <a href="javascript:;" onClick={() => this.checkModalShow(record)}>
                添加课时
              </a>
              &nbsp;&nbsp;
              <a href="javascript:;" onClick={() => this.downLoadModalShow(record)}>
                导出课时记录
              </a>
            </span>
          );
        },
      },
    ];
  };

  rowSelection = () => {
    return {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys, selectedRows });
      },
    };
  };

  onRow = record => {
    return {
      onClick: () => {
        let { selectedRowKeys, selectedRows } = this.state;

        if (selectedRowKeys.indexOf(record.key) > -1) {
          selectedRowKeys = selectedRowKeys.filter(s => s !== record.key);
          selectedRows = selectedRows.filter(s => s.key !== record.key);
        } else {
          selectedRowKeys.push(record.key);
          selectedRows.push(record);
        }
        this.setState({
          selectedRowKeys: [...selectedRowKeys],
          selectedRows: [...selectedRows],
        });
      },
    };
  };

  addClassTimeOk = () => {
    const { dispatch } = this.props;
    const { currentRecord } = this.state;
    const form = this.formRef.props.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      var classTimeParamList = [];

      if (values.oneByOne) {
        var classTime = {};
        classTime.type = 2;
        classTime.classTime = values.oneByOne;
        classTimeParamList.push(classTime);
      }
      if (values.vipOneByOne) {
        var classTime = {};
        classTime.type = 3;
        classTime.classTime = values.vipOneByOne;
        classTimeParamList.push(classTime);
      }
      if (values.classLesson) {
        var classTime = {};
        classTime.type = 1;
        classTime.classTime = values.classLesson;
        classTimeParamList.push(classTime);
      }

      if (classTimeParamList.length == 0) {
        return;
      }
      dispatch({
        type: 'studentMg3/addStudentClassTime',
        payload: {
          studentId: currentRecord.id,
          type: values.type,
          subject: values.subject,
          classTimeParamList: classTimeParamList,
        },
      }).then(() => {
        const { addClassTimeResponse } = this.props.studentMg;
        if (addClassTimeResponse && addClassTimeResponse.data == 1) {
          myMessage.success('课时添加成功', 3);
          const { form } = this.props;
          this.setState({ checkVisible: false });
          form.resetFields();
          const { manageStatus, subject, pageNo } = this.state;
          const params = {};
          params.pageNo = pageNo;
          params.learnState = manageStatus;
          params.subject = subject;
          params.name = form.getFieldValue('name');
          this.loadData(params);
        } else {
          myMessage.error('课时添加失败', 3);
        }
      });
    });
  };

  addClassTimeCancel = () => {
    this.setState({ checkVisible: false });
  };

  checkModalShow = record => {
    this.setState({
      checkVisible: true,
      currentRecord: record,
    });
  };
  downLoadModalShow = record => {
    this.setState({
      downLoadVisible: true,
      currentRecord: record,
    });
  };
  checkSizeChange = e => {
    this.setState({ currentCheckSize: e });
  };
  tablePageChange = pageNo => {
    this.setState({
      pageNo: pageNo,
    });
    var param = {};
    param.pageNo = pageNo;
    this.pageSearch(param);
  };
  createDateChange = (date, dateString) => {
    this.setState({
      downLoadDateFrom: dateString[0],
      downLoadDateTo: dateString[1],
    });
  };
  saveFormRef = formRef => {
    this.formRef = formRef;
  };
  downloadOk = () => {
    const { currentRecord, downLoadDateFrom, downLoadDateTo } = this.state;
    var param = 'studentId=' + currentRecord.id;
    if (downLoadDateFrom && downLoadDateTo) {
      param += '&from=' + downLoadDateFrom + '&to=' + downLoadDateTo;
    }
    //TODO 杨波 这里可能要雨修改
    window.location.href = baseUri + '/teach/manage/lesson/exportStudentClassTime?' + param;
    //暂时支持日期 不支持带有时间类型的
    this.setState({ downLoadVisible: false, defaultDateRange: [] });
  };
  downloadCancel = () => {
    this.setState({ downLoadVisible: false });
  };

  render() {
    const Option = Select.Option;
    const { RangePicker } = DatePicker;
    const FormItem = Form.Item;
    const { studentList } = this.props.studentMg;
    const { subjectList } = this.props.classInfo;
    const { getFieldDecorator } = this.props.form;

    return (
      <PageHeaderLayout>
        <Modal
          title="导出时间"
          visible={this.state.downLoadVisible}
          onOk={this.downloadOk}
          onCancel={this.downloadCancel}
        >
          <p>请选择导出时间：</p>
          <p>
            <RangePicker
              span={12}
              defaultValue={this.state.defaultDateRange}
              onChange={this.createDateChange}
            />
          </p>
        </Modal>
        <StudentClassTimeAddFrom
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.checkVisible}
          onCancel={this.addClassTimeCancel}
          onCreate={this.addClassTimeOk}
        />

        <Card bordered={false}>
          <Form layout="inline" onSubmit={this.searchByParam}>
            <FormItem label="查询">
              {getFieldDecorator('name')(<Input placeholder="姓名" />)}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </FormItem>

            <FormItem label="科目">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.subjectSelect}>
                <Option value="">全部</Option>
                {subjectList.map((item, index) => {
                  return (
                    <Option key={index} value={item.code}>
                      {item.msg}{' '}
                    </Option>
                  );
                })}
              </Select>
            </FormItem>
            <FormItem label="状态">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.manageStatusSelect}>
                <Option value="">全部</Option>
                <Option value={2}>待分班</Option>
                <Option value={3}>已就读</Option>
                <Option value={4}>已毕业</Option>
                <Option value={5}>已暂停</Option>
              </Select>
            </FormItem>
            <Table
              dataSource={studentList.list}
              columns={this.getColumns()}
              pagination={{
                onChange: this.tablePageChange,
                current: this.state.pageNo,
                size: 10,
                total: studentList.total,
                showTotal() {
                  return (
                    <span>
                      共 <a style={{ color: '#1893ab' }}>{studentList.total}</a> 位
                    </span>
                  );
                },
              }}
            />
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default StudentMg;
